<!DOCTYPE html>
<html   xmlns="http://www.w3c.org/1999/xhtml"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head/>
    <h:body>
        <h:panelGrid columns="2">
            
            <h:outputText value="1"/>
            <h:panelGroup>
                <p:inplace>
                    <h:inputText value="Edit me" />
                </p:inplace>
            </h:panelGroup>
            
            <h:outputText value="2"/>
            <h:panelGroup>
                <h:outputText value="Select One:" />
                <p:inplace label="Cities">
                    <h:selectOneMenu>
                        <f:selectItem itemLabel="Istanbul" itemValue="Istanbul" />
                        <f:selectItem itemLabel="Ankara" itemValue="Ankara" />
                    </h:selectOneMenu>
                </p:inplace>
            </h:panelGroup>
            
            <h:outputText value="3"/>
            <h:panelGroup>
                <p:inplace id="checkboxInplace">
                    <f:facet name="output">
                        Yes or No
                    </f:facet>
                    <f:facet name="input">
                        <h:selectBooleanCheckbox />
                    </f:facet>
                </p:inplace>
            </h:panelGroup>
            
            <h:outputText value="4"/>
            <h:panelGroup>
                <p:inplace label="Show Image" effect="slide" effectSpeed="fast">
                    <p:graphicImage value="/IMG/photo1.jpg" />
                </p:inplace>
            </h:panelGroup>
            
            <h:outputText value="5"/>
            <h:panelGroup>
                <p:inplace label="editor" editor="true">
                    <p:ajax event="save" listener="#{inplaceBean.handleSave}"/>
                    <h:inputText value="#{inplaceBean.text}" />
                </p:inplace>
            </h:panelGroup>
        </h:panelGrid>
    </h:body>
</html>
